<!-- MyTransition.vue -->
<script setup>
// JavaScript 钩子逻辑...
// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  console.log(el, 'enter')
  done()
}

// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  console.log(el, 'leave')
  done()
}
</script>

<template>
  <div>
    <!-- 包装内置的 Transition 组件 -->
    <Transition name="my-transition" @enter="onEnter" @leave="onLeave">
      <slot></slot> <!-- 向内传递插槽内容 -->
    </Transition>
  </div>
</template>

<style>
/*
  必要的 CSS...
  注意：避免在这里使用 <style scoped>
  因为那不会应用到插槽内容上
*/

.my-transition-enter-active,
.my-transition-leave-active {
  transition: opacity 0.5s ease;
}

.my-transition-enter-from,
.my-transition-leave-to {
  opacity: 0;
}
</style>
